<template>
    <div>
        <van-nav-bar
        right-text=""
        left-arrow
        >
        <template #left >
            <van-icon name="search" size="22" />
        </template>
        </van-nav-bar>
        <div  >
        <van-index-bar  :index-list="indexList"  class="letter_classify_li"  >
            <section class="group_city_container">
                <h4 class="city_title">热门城市</h4>
            <ul class="citylistul clear">
                <router-link  tag="li" v-for="item in hotcity" :to="'/city/' + item.id" :key="item.id">
                    {{item.name}}
                </router-link>
            </ul>
            <ul class="letter_classify">
                <li v-for="(value, key, index) in sortgroupcity" :key="key"  class="letter_classify_li">
                    <h4 class="city_title">{{key}}
                        <span v-if="index == 0">（按字母排序）</span>
                    </h4>
                    <ul class="groupcity_name_container citylistul clear">
                        <router-link  tag="li" v-for="item in value" :to="'/city/' + item.id" :key="item.id" class="ellipsis">
                            {{item.name}}
                        </router-link>
                    </ul>
                </li>
            </ul>
        </section>
            
            
        </van-index-bar>
        </div>
    </div>
     
</template>

<script>
import { hotcitylist , citylists } from "../../api/reques";
export default {
    data () {
        return {
            item:{},
            alphabet:[],//字母表
            hotcity: [], //热门城市
            codeList:{},//所有城市列表
            indexList:[],
            latitude:23.217328,
            longitude:113.304908,
            ctiy:{}
        }
    },
    created(){
        this.citylists()
        this.hotcitylist()
    },
    beforeMount(){
        // console.log(this.ctiy);
    },
    methods:{
        async citylists(){
        let res = await citylists()
        // console.log(res.data);
        this.codeList = res.data     
       },
       async  hotcitylist(){
       let res = await  hotcitylist()
    //    console.log(res.data);
       this.hotcity = res.data
       },
    },
    computed:{
        
        //将获取的数据按照A-Z字母开头排序
        sortgroupcity(){
            let sortobj = {};
            for (let i = 65; i <= 90; i++) {
                if (this.codeList[String.fromCharCode(i)]) {
                    this.indexList.push(String.fromCharCode(i))
                    sortobj[String.fromCharCode(i)] = this.codeList[String.fromCharCode(i)];
                }
            }
            return sortobj
        }
    },
    
    
    
}
</script>

<style lang="scss" scoped>
    .van-nav-bar {
      background: rgb(2, 182, 253, 0.7);
    }
</style>
